<template>
  <div class="list-common-table">

    <t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
      <t-row>
        <t-col :span="10">
          <t-row :gutter="[16, 16]">
            <t-col :flex="1" v-show="!manager">
              <t-button @click="()=>{modiVisible=true}">提交复查提醒</t-button>
              <t-button @click="()=>{modiCheckVisible=true}">提交复查结果</t-button>
            </t-col>
            <t-col :flex="1">
              <t-form-item label="患者姓名" name="name">
                <t-input v-model="formData.name" class="form-item-content" placeholder="患者姓名"
                  :style="{ minWidth: '134px' }" />
              </t-form-item>
            </t-col>
          </t-row>
        </t-col>

        <t-col :span="2" class="operation-container">
          <t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }">查询</t-button>
          <t-button type="reset" variant="base" theme="default">重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <div class="table-container">
      <t-table :data="data" :columns="columns" :rowKey="rowKey" :stripe="defaultTrue" :verticalAlign="verticalAlign"
        :hover="hover" :pagination="pagination" @page-change="rehandlePageChange" @change="rehandleChange"
        :loading="dataLoading">
        <template #status="{ row }">
          <t-tag v-if="row.review === ARTICLE_STATUS.POSTED" theme="danger" variant="light">待审核</t-tag>
          <t-tag v-if="row.review === ARTICLE_STATUS.ALLOWED" theme="success" variant="light">审核通过</t-tag>
          <t-tag v-if="row.review === ARTICLE_STATUS.CLOSED" variant="light">未通过</t-tag>
        </template>
        <template #op="slotProps">
          <t-button @click="rehandleClickOp(slotProps, 'info')" shape="circle">
            <t-icon name="browse"></t-icon>
          </t-button>
        </template>
      </t-table>
    </div>
  </div>
</template>

<script>
  import {
    prefix
  } from '@/config/global';
  // import Trend from '@/components/trend/index.vue';
  // import Card from '@/components/card/index.vue';
  // import Editor from '@tinymce/tinymce-vue'
  import {
    ARTICLE_STATUS,
    ARTICLE_STATUS_OPTIONS,
    ARTICLE_TYPE_OPTIONS
  } from '@/constants';
  import tcb from "tcb-js-sdk"
  let tcbApp = tcb.init({
    env: "test-8gnvuow8188ceb83"
  })
  let auth = tcb.auth();
  auth.anonymousAuthProvider().signIn() // 匿名登录，实际业务时根据需要进行调整
    .then(() => {
      console.log("登陆成功") //登录成功
    }).catch(err => {
      console.log("登录失败", err) //登录失败
    })
  export default {
    name: 'list-table',
    components: {
      // 'editor': Editor
    },
    data() {
      return {
        showReview: false,
        modiCheckVisible: false,
        modiVisible: false,
        manager: false,
        defaultTrue: true,
        workorderInfo: {},
        infoVisible: false,
        postVisible: false,
        postValue: '',
        ARTICLE_STATUS,
        ARTICLE_STATUS_OPTIONS,
        ARTICLE_TYPE_OPTIONS,
        prefix,
        formData: {},
        data: [],
        dataLoading: false,
        value: 'first',
        columns: [{
            title: '患者姓名',
            width: 125,
            fixed: 'left',
            ellipsis: true,
            colKey: 'name'
          },
          {
            title: '(预期)检查时间',
            // minWidth: '300',
            align: 'left',
            // ellipsis: true,
            colKey: 'checkTime',
            width: 250
          },
          {
            title: '检查项目',
            // minWidth: '300',
            align: 'left',
            // ellipsis: true,
            colKey: 'checkListString',
            width: 250
          },
          {
            align: 'center',
            fixed: 'right',
            width: 100,
            colKey: 'op',
            title: '操作'
          }
        ],
        rowKey: 'index',
        tableLayout: 'auto',
        verticalAlign: 'top',
        bordered: true,
        hover: true,
        rowClassName: rowKey => `${rowKey}-class`,
        // 与pagination对齐
        pagination: {
          defaultPageSize: 10,
          total: 100,
          defaultCurrent: 1,
          pageSizeOptions: [5, 10, 20, 50]
        },
        pages: {
          current: 1,
          pageSize: 10
        },
        confirmVisible: false,
        deleteIdx: -1,
      };
    },
    computed: {},
    mounted() {
      // console.log(this.$store.state.user.userInfo.type)
      if (localStorage.getItem('ovcf-token') != undefined) {
        console.log('set token');
        this.$store.commit('user/setToken', localStorage.getItem('ovcf-token'));
        this.$store.commit('user/setUserInfo', JSON.parse(localStorage.getItem('info')));
      }

      this.formData = {
        name: ""
      }
      this.dataLoading = true;
      this.$request
        .post('/doctor-patient?type=recheckList&pageSize=10&current=1', this.formData)
        .then(res => {
          if (res.code === 0) {
            console.log(res);
            this.pagination.total = res.count;
            this.data = res.info;
            for (let i = 0; i < this.data.length; i++) {
              let temp = ''
              for (let j = 1; j < this.data[i].checkList.length; j++) {
                temp += this.data[i].checkList[j]
                temp += ' '
              }
              this.data[i].checkListString = temp
            }
          }
        })
        .catch(e => {
          this.$message.error('错误！');
          console.log(e);
        })
        .finally(() => {
          this.dataLoading = false;
        });
      this.manager = this.$store.state.user.userInfo.type === 'Doctor' ? false : true;
      for (let i = 0; i < this.data.length; i++) {
        this.data[i].content = this.data[i].content.replaceAll(/<[/s/S]*>/ig)
      }
    },
    methods: {
      closeInfo() {
        this.infoVisible = false;
        this.postVisible = false;
        this.postValue = '';
        this.modiVisible = false;
        this.workorderInfo = {};
      },
      onReset(data) {
        console.log(data);
      },
      async onSubmit(data) {
        console.log(this.formData);
        // this.pagination.current = 1;
        this.$request
          .post('/doctor-patient?type=recheckList&pageSize=' + this.pages.pageSize + '&current=' + this.pages.current,
            this
            .formData)
          .then(res => {
            if (res.code === 0) {
              console.log(res);
              this.pagination.total = res.count;
              this.data = res.info;
            }
          })
          .catch(e => {
            console.log(e);
          })
          .finally(() => {
            this.dataLoading = false;
          });
      },
      async rehandlePageChange(curr, pageInfo) {
        console.log('分页变化', curr, pageInfo);
        this.pages.pageSize = curr.pageSize;
        this.pages.current = curr.current;
        await this.onSubmit();
      },
      rehandleChange(changeParams, triggerAndData) {
        console.log('统一Change', changeParams, triggerAndData);
      },
      rehandleClickOp({
        text,
        row
      }, type) {
        console.log(text, row, type);
      },
      handleClickDelete(row) {
        this.deleteIdx = row.rowIndex;
        this.confirmVisible = true;
      }
    }
  };
</script>
<style lang="less">
  @import './index.less';

  .list-common-table {
    background-color: @bg-color-container;
    padding: 30px 32px;
    border-radius: @border-radius;

    .table-container {
      margin-top: 30px;
    }
  }

  .form-item-content {
    width: 100%;
  }

  .operation-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .payment-col {
    display: flex;

    .trend-container {
      display: flex;
      align-items: center;
      margin-left: 8px;
    }
  }
</style>
